<template>
    <CarouselView />
    <ConnectionView />
    <div class="home-item">
        <h1>产品分类</h1>
    </div>
    <div class="container">
        <div class="row">
            <div class="col-12 produce_classify">
                <div v-for="produce in produce_list" :key="produce.id" @click="to_product_center(produce.produce_name)">
                    <img :src="produce.photo" alt="" class="produce_photo">
                    <div class="produce_name">{{ produce.produce_name }}</div>
                </div>
            </div>
        </div>
    </div>
    <div class="produce_recomment">
        <h2>热门推荐</h2>
    </div>
    <div class="container">
        <div class="row">
            <div class="col-12">
                <div class="card card_display" style="width: 25rem;" v-for="recomment in recomment_list" :key="recomment.id">
                    <div class="card-img-container" @click="open_a_produce(recomment.title)">  
                        <img :src="recomment.photo" class="card-img-top" alt="...">  
                    </div> 
                    <div class="card-body">
                        <div class="card-price">￥{{ recomment.price }}</div>
                        <p class="card-text">{{ recomment.title }} {{ recomment.usage }}</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="container">
        <div class="row">
            <div class="col-12 card mb-3">
                <div class="row g-0">
                    <div class="col-md-8" style="width: 370px;">
                        <div class="card-body-produce">
                            <h3 class="card-title">公司介绍</h3>
                            <div class="card-text-company">  
                                <p>我司是一家专注于设计、生产集装箱房、创意集装箱、民宿、小吃街、餐车的公司。我们致力于为客户提供高品质、创新设计的解决方案。</p>  
                                <p>经过多年发展，我司培养了4个设计团队，并在国内各大地区设立了售后驻守点，以提升客户的使用体验和售后维护服务。</p>  
                                <p>公司秉承“产品质量是生存之基，客户满意是立厂之本”的理念，发展迅速，先后与国内多家企业进行过深度合作，并在国内外市场上具有了一定影响力。我们致力于临建产品的实用化、普及化，未来我们将更加努力，继往开来，开创美好的明天！</p>  
                            </div> 
                        </div>
                    </div>
                    <div class="col-md-4" style="width: 1000px;">
                        <img src="../assets/工厂.jpg" class="img-fluid rounded-start" alt="..." style="width: 100%;">
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import CarouselView from '@/components/CarouselView.vue';
import ConnectionView from '@/components/ConnectionView.vue';
import $ from 'jquery';
import { ref } from 'vue';
import { useRouter } from 'vue-router';
import { useStore } from 'vuex';
export default {
    name: 'HomeView',
    components: {
        CarouselView,
        ConnectionView
    },
    setup() {
        const produce_list = ref([]);
        const router = useRouter();
        const recomment_list = ref([]);
        const store = useStore();
        $.ajax({
            url: "http://47.121.28.202:8000/settings/produce/",
            type: "GET",
            success(resp) {
                produce_list.value = resp;
            }
        })

        const to_product_center = (produce_name) => {
            if (produce_name === "家用防盗门") {
                router.push({
                    name: "burglaryproofdoor",
                })
            }
            if (produce_name === "卷帘门") {
                router.push({
                    name: "homerollerdoor",
                })
            }
            if (produce_name === "小吃车") {
                router.push({
                    name: "foodcart",
                })
            }
        }

        $.ajax({
            url: "http://47.121.28.202:8000/settings/roller_door/",
            type: "GET",
            success(resp) {
                let count = 0;
                for (let i of resp) {
                    if (count < 3) {
                        recomment_list.value.push(i);
                        count ++;
                    }
                }
                $.ajax({
                    url: "http://47.121.28.202:8000/settings/burglary_proof_door/",
                    type: "GET",
                    success(resp) {
                        let count = 0;
                        for (let i of resp) {
                            if (count < 3) {
                                recomment_list.value.push(i);
                                count ++;
                            }
                        }
                        $.ajax({
                            url: "http://47.121.28.202:8000/settings/food_cart/",
                            type: "GET",
                            success(resp) {
                                let count = 0;
                                for (let i of resp) {
                                    if (count < 3) {
                                        recomment_list.value.push(i);
                                        count ++;
                                    }
                                }
                            }
                        })
                    }
                })
            }
        })

        const open_a_produce = (produce_name) => {
            if (store.state.user.is_login) {
                router.push({
                    name: 'productinterface',
                    params: {
                        producename: produce_name,
                    } 
                })
            } else {
                router.push({
                    name: 'login',
                })
            }
        }

        return {
            produce_list,
            to_product_center,
            recomment_list,
            open_a_produce
        }
    }
}
</script>

<style scoped>
.home-item {
    margin-top: 30px;
    display: flex;
    flex-direction: column;
    align-items: center;
}
h1 {
    font-weight: bold;
}
.produce_photo {
    width: 400px;
    height: 350px;
    margin: 30px;
    margin-top: 0;
    margin-bottom: 0;
}
.produce_classify {
    display: flex;
    flex-wrap: nowrap;
}
.produce_classify > div {
    text-align: center;
    margin-bottom: 15px;
    font-size: 30px;
    font-weight: bold;
    cursor: pointer;
}
.produce_recomment {
    text-align: center;
}
.container {  
    max-width: 1400px;
}
.card_display {
    display: inline-block;
    margin: 28px;
    margin-bottom: 5px;
    margin-top: 10px;
    cursor: pointer;
    overflow: hidden;
    box-sizing: border-box;
}
.card-img-top {
    height: 400px;
    transition: transform 0.3s ease; 
    width: 100%; 
}
.card-text {
    margin-bottom: 0px;
}
.card-price {
    color: red;
}
.card-price {
    margin-bottom: 0px;
}
.card-img-top:hover {  
    transform: scale(1.1);
}
.card-img-container {  
    position: relative;
    width: 100%;  
    overflow: hidden;  
}
.card-body {
    display: block;
}
.factory_img {
    position: relative;
    right: 20px;
    margin-top: 0px;
}
.col-md-8 {
    margin: 0px;
}
.col-md-4 {
    margin: 0px;
}
.img-fluid {
    position: relative;
    left: 16.5px;
}
.card-body-produce > .card-title {
    text-align: center;
    margin-top: 20px;
    font-weight: bolder;
}
.card-text-company {  
    text-align: justify;    
    line-height: 1.6;  
    color: #333;  
    text-indent: 2em;   
}  
.card-text-company p {  
    margin: 0 0 15px 0;  
} 
</style>
